<template>
	<view class="pb40">
		<view class="navbar">
			<view class="bark" @click="Return()"><image src="../../static/icon/bark.png" mode=""></image></view>
			<view class="text--center f17 white">
				<text>{{ i18n.qhzh }}</text>
			</view>
		</view>
		<!-- <navbar :title="i18n.qhzh"></navbar> -->
		<view class="w690 auto f14 white">{{ i18n.dqzh }}</view>
		<view class="fcc bg-theme mx15 bor10 py25 px15 my15">
			<image :src="userInfo.avatar" mode="aspectFill" class="block50"></image>
			<view class="white ml11">
				<view class="f20">{{ userInfo.walletName }}</view>
				<view class="fcc mt12 f13 ">
					<view class=" w450 ellipsis">{{i18n.yqm}}：{{ userInfo.inviteCode}}</view>
					<image src="../../static/uesr/wcopy.png" class="block10 ml2" @click="copy(userInfo.inviteCode)"></image>
				</view>
			</view>
		</view>
		<view class="w690 auto f14 white">{{ i18n.qtzh }}</view>
		<view class="fsb bgcc mx15 bor10 py20 px15 my15 flex-content-between mb20" v-for="(item, index) in list" :key="index">
			<view class="white">
				<view class="f20" @click="switchs(item)">{{ item.walletName }}</view>
				<view class="flex-text mt8">
					<text class="hui f11 block   ellipsis mr10" @click="switchs(item)">{{i18n.yqm}}：{{ item.inviteCode }}</text>
					<image src="../../static/uesr/wcopy.png" mode="" class="block10" @click="copy(item.inviteCode)"></image>
				</view>
			</view>
			<view class="blue text--center px10 py6 f11"><image src="../../static/uesr/sc.png" mode="" class="block20" @click="remove(item)"></image></view>
		</view>
		<view class="w690 auto fsb btns">
			<view class="btn-pink" @click="pushPage('../login/establish')">{{ $t('login.cjqb') }}</view>
			<view class="btn-blue" @click="pushPage('../login/import')">{{ $t('login.drqb') }}</view>
		</view>
		<view class="mark" v-if="mark" @click="mark = !mark"></view>
		<view class="tips" v-if="mark">
			<view class="f20 hei fwb500">{{ i18n.zhcz }}</view>
			<view class="f14 color-red mt17">{{ i18n.cztips }}</view>
			<!-- <view class="bor10 bg-pop py12 mt9">
				<input type="number" class="f14 color-black" placeholder="请输入支付密码">
			</view> -->
			<view class="fsb mt24">
				<view class="btn-white mr15" @click="mark = !mark">{{ i18n.qx }}</view>
				<view class="btn-blue border1" @click="details()">{{ i18n.qdsc }}</view>
			</view>
		</view>
		<view class="mark" v-if="marks" @click="marks = !marks"></view>
		<view class="tips" v-if="marks">
			<view class="f20 hei fwb500 mt16">{{ i18n.zhcz }}</view>
			<view class="f14 hui mt17">{{ i18n.qhtips }}</view>
			<view class="fsb mt24">
				<view class="btn-white mr15" @click="marks = !marks">{{ i18n.qx }}</view>
				<view class="btn-blue" @click="toggle()">{{ i18n.qd }}</view>
			</view>
		</view>
		<null v-if="list.length == 0"></null>
	</view>
</template>

<script>
export default {
	data() {
		return {
			mark: false,
			list: [],
			marks: false,
			ToggleArray: [],
			address: ''
		};
	},
	computed: {
		i18n() {
			return this.$t('user');
		}
	},
	onShow() {
		this.getUser();
		this.getWalletList()
	},
	methods: {
		Return() {
			uni.navigateBack({
				delta:1
			})
		},
		async getWalletList() {
			let { data } = await this.$http.post('user.getWalletList', { phoneId: this.UID }, { isAuth: true, tipConfig: { isLoading: false } });
			this.list = data;
			console.log(data)
		},
		switchs(item) {
			this.marks = true;
			this.ToggleArray = item;
		},
		toggle() {
			uni.setStorageSync('priKey', this.ToggleArray.priKey);
			uni.setStorageSync('token', this.ToggleArray.token);
			this.getUser();
			this.getWalletList();
			this.marks = false;
		},
		remove(item) {
			this.mark = true;
			this.address = item;
		},
		async details() {
			let params = {
				phoneId: this.UID,
				address: this.address,
				userId:this.address.id
			};
			let { data } = await this.$http.post('user.deleteWallet', params, { isAuth: true, tipConfig: { isLoading: false } });
			uni.showToast({
				title: this.$t('tips').sctips,
				icon: 'none'
			});
			this.mark = false;
			this.getWalletList();
		},
		
		getDeviceInfo(){
			let that = this
			plus.device.getInfo({
				success:function(e){
					that.UID = e.uuid
					that.getWalletList()
				},
				fail:function(e){
					that.UID = e.uuid
				}
			});
		}
	}
};
</script>

<style lang="less">
.hei {
	color: #434345;
}
.btns {
	position: fixed;
	bottom: 30rpx;
	left: 50%;
	transform: translate(-50%, 0);
}
.tips {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600rpx;
	background: white;
	border-radius: 16rpx;
	padding: 48rpx;
	text-align: center;
	z-index: 99;
}
.w450 {
	width: 450rpx;
}
.bg-pop{
	background-color:#F7F8FA ; 
}
.navbar {
	line-height: 88rpx;
	// height: 88rpx;
	width: 100%;
	position: relative;
	padding-top: 88rpx;
}
.bark {
	display: block;
	position: absolute;
	top: 106rpx;
	left: 30rpx;
	z-index: 1;
	width: 48rpx;
	height: 48rpx;
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
}
.text {
	color: white;
	font-size: 36rpx;
	font-family: PingFangSC, PingFangSC-Semibold;
	font-weight: 600;
	text-align: center;
	color: #ffffff;
	line-height: 88rpx;
}
</style>
